<div class="report-summary" style="page-break-after: avoid;">
  <span class="summary-title" style="font-size: 16px;">
    {{ (reportPage === 'vulnerabilities' ? 'scan' : 'cis') + '.report.others.IMAGE_INS' | translate: { safeRate4Images: safeRate4Images, imageCnt: images.length } }}
  </span>
</div>
<table class="print-table margin-top-l">
  <thead>
    <tr class="print-header">
      <th class="print-cell" style="width: 30%">
        {{'nodes.detail.NAME' | translate }}
      </th>
      <th *ngIf="reportPage === 'vulnerabilities'" class="print-cell" style="width: 10%">
        {{ 'scan.report.gridHeader.HI_MED' | translate }}
      </th>
      <th *ngIf="reportPage === 'vulnerabilities'" class="print-cell" style="width: 60%">
        {{ 'group.gridHeader.VULNERABILITIES' | translate }}
      </th>
      <th *ngIf="reportPage === 'compliance'" class="print-cell" style="width: 10%">
        {{ 'cis.report.gridHeader.COMPLIANCE_LIST' | translate }}
      </th>
      <th *ngIf="reportPage === 'compliance'" class="print-cell" style="width: 70%">
        {{ 'cis.report.gridHeader.COMPLIANCE_CNT' | translate }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="print-row" *ngFor="let image of images; let i = index" [attr.data-index]="i">
      <td class="print-cell" style="width: 30%">
        {{ image.image_name }}
      </td>
      <td *ngIf="reportPage === 'vulnerabilities'" class="print-cell" style="width: 10%">
        <div *ngIf="image.high + image.medium > 0">
          <span class="text-danger">{{ image.high }}</span>&nbsp;/&nbsp;<span class="text-warning">{{ image.medium }}</span>
        </div>
        <div *ngIf="image.high + image.medium === 0">
          <span class="text-success">0</span>
        </div>
      </td>
      <td *ngIf="reportPage === 'vulnerabilities'" class="print-cell" style="width: 60%">
        <div *ngIf="image.high + image.medium > 0">
          <span *ngFor="let item of image.vulnerabilites" class="margin-right-s text-{{ item.style }}">
            {{item.text.trim()}}
          </span>
        </div>
        <div *ngIf="image.high + image.medium === 0">
          <span class="text-success">{{ "scan.NO_VULNERABILITIES" | translate }}</span>
        </div>
      </td>
      <td *ngIf="reportPage === 'compliance'" class="print-cell" style="width: 10%">
        {{ image.complianceCnt }}
      </td>
      <td *ngIf="reportPage === 'compliance'" class="print-cell" style="width: 70%">
        <div class="row">
          <div *ngFor="let item of image.complianceList" class="col-sm-2 text-{{ colourMap[item.style.toUpperCase()] }}">
            {{item.text.trim()}}
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
